<template>
    <view class="pub_page pub_page_bg pub_ecology_tree">
        <pub-head headerName="ecology_tree" :headerConfig="headerConfig"></pub-head>
        <pub-dialog v-show="dialogShow" dialogName="ecology_send" :dialogConfig="dialogConfig"
            @dialogBack="dialogBack"></pub-dialog>
        <div class="page_box" v-if="treeInfo != '' && userInfo != ''">
            <div class="tree_div">
                <div class="lis">
                    <div @click="toDeal('to_get_coin')" class="li_1" :class="'li_1_'+li"
                        v-for="(li,key) in treeInfo.coin_list" :key="`coin_${key}`">金币</div>
                    <div @click="toDeal('to_get_ctt')" class="li_2" :class="'li_2_'+li"
                        v-for="(li,key) in treeInfo.ctt_list" :key="`ctt_${key}`">CTT
                    </div>
                </div>
            </div>
            <div class="nums_div">
                <div class="li_first">
                    <div class="p_1">{{ userInfo.nutrition }}</div>
                    <div class="p_2">营养值</div>
                </div>
                <div class="li">
                    <div class="txt">
                        <div class="p_1">{{ treeInfo.teamNum }}</div>
                        <div class="p_2">树枝人脉</div>
                    </div>
                </div>
                <div class="li">
                    <div class="txt">
                        <div class="p_1">{{ treeInfo.directNum }}</div>
                        <div class="p_2">树根人脉</div>
                    </div>
                </div>
                <div class="li_o">
                    <div class="txt">质押CTT</div>
                    <div class="num">{{ treeInfo.pledgeNum }}
                        <!-- <div class="btn" @click="zhiyaShow=true">质押</div> -->
                        <div class="btn" v-if="treeInfo.pledgeNum>0"
                            @click="$comFun.openWin('/pages/ecology/tree_pledge_list')">解押</div>
                    </div>
                </div>
                <div class="li_o">
                    <div class="txt">映射金币</div>
                    <div class="num">{{ treeInfo.mappingNum }}</div>
                </div>
            </div>
            <div class="task_div">
                <div class="title">任务中心</div>
                <div class="lis">
                    <div class="li">
                        <div class="p_1">今日完成点赞</div>
                        <div class="p_1">{{ treeInfo.dayThumbNum }}/3</div>
                    </div>
                </div>
            </div>
        </div>

        <view class="tree_alert_div" v-if="zhiyaShow">
            <div class="alert_box">
                <div class="title">质押
                    <text class="close icon-font-basic icon-b-off-1" @click="zhiyaShow=false"></text>
                </div>
                <div class="content">
                    <input class="input" type="text" placeholder="请输入质押数量" v-model="zhiyaNum">
                </div>
                <div class="btn" @click="toDeal('to_zhiya')">确定质押</div>
            </div>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            headerConfig: {
                title: '',//标题栏内容
                left_type: 3,
                left_content: 'white'
            },
            dialogShow: false,
            dialogType: '',
            dialogConfig: {
                title: '提示',//标题栏内容
                content: ''
            },

            treeInfo: '',
            userInfo: '',

            zhiyaShow: false,
            zhiyaNum: ''
        };
    },
    onLoad() {
        this.getInfo();
        uni.$on("reloadTreePageInfo", () => {
            this.getInfo();
        })
    },
    methods: {
        dialogBack(data) {
            // console.log(data);
            this.dialogShow = false;
            if (data.name == 'ecology_send' && data.key == 1) {
                this.toDeal(this.dialogType)
            }
        },
        async getInfo() {
            if (this.treeInfo == '') {
                this.$comFun.openLoading();
            }
            const res = await this.$request.get('user/treeInfo', {});
            const res_1 = await this.$request.get('user/userInfo', {});
            if (this.treeInfo == '') {
                this.$comFun.closeLoading();
            }
            // console.log(res);
            if (res.code == 200) {
                // res.result.cttNum = 10;
                // res.result.coinNum = 10;
                let num_arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

                num_arr.sort(() => Math.random() - 0.5);
                res.result.coin_list = num_arr.slice(0, res.result.coinNum > 10 ? 10 : res.result.coinNum);

                num_arr.sort(() => Math.random() - 0.5);
                res.result.ctt_list = num_arr.slice(0, res.result.cttNum > 10 ? 10 : res.result.cttNum);

                console.log(res.result);
                this.treeInfo = res.result;
            }
            if (res_1.code == 200) {
                this.userInfo = res_1.result;
            }
        },
        async toDeal(type, data_1, data_2) {
            switch (type) {
                case 'to_zhiya':
                    if (this.zhiyaNum == '' || !this.$comFun.ValidateNum(this.zhiyaNum)) {
                        this.$comFun.toast('请先填写正确的质押数量');
                        return;
                    }
                    if (this.zhiyaNum % 10 != 0) {
                        this.$comFun.toast('质押数量需为10的倍数');
                        return;
                    }
                    this.toDeal('sure_zhiya');
                    // this.dialogType = 'sure_zhiya';
                    // this.dialogConfig = {
                    //     title: '提示',//标题栏内容
                    //     content: '是否确定质押？'
                    // }
                    // this.dialogShow = true;
                    break;
                case 'sure_zhiya':
                    this.$comFun.openLoading();
                    const res_2 = await this.$request.get('user/pledge', {
                        num: this.zhiyaNum
                    });
                    // console.log(res_2);
                    this.$comFun.closeLoading();
                    if (res_2.code == 200) {
                        this.zhiyaNum = '';
                        this.zhiyaShow = false;
                        this.$comFun.toast('质押成功');
                        this.getInfo();
                    } else {
                        this.$comFun.toast(res_2.message);
                    }
                    break;
                case 'to_get_coin':
                    this.$comFun.openLoading();
                    const res_3 = await this.$request.get('user/receivePledgeReward', {});
                    // console.log(res_3);
                    this.$comFun.closeLoading();
                    if (res_3.code == 200) {
                        this.$comFun.toast('领取成功');
                        // this.getInfo();
                        this.treeInfo.coin_list = [];
                    } else {
                        this.$comFun.toast(res_3.message);
                    }
                    break;
                case 'to_get_ctt':
                    this.$comFun.openLoading();
                    const res_4 = await this.$request.get('user/receiveCttReward', {});
                    // console.log(res_4);
                    this.$comFun.closeLoading();
                    if (res_4.code == 200) {
                        this.$comFun.toast('领取成功');
                        this.treeInfo.ctt_list = [];
                        // this.getInfo();
                    } else {
                        this.$comFun.toast(res_4.message);
                    }
                    break;
                default:
                    break;
            }
        },
    },
};
</script>

<style lang="scss" scoped>
@import "@/common/css/ecology.scss";
</style>
